<template>
  <div>
    <a-input-search placeholder="搜索任务单" style="width: 400px" @search="onSearch" />
    <br><br/>
    <a-table ref="TableInfo"
             :columns="columns"
             :rowKey="record => record.taskId"
             :dataSource="dataSource"
             :pagination="pagination"
             :loading="loading"
             :scroll="{ x: 600 }"
             @change="handleTableChange"
             size="middle">
      <template slot="operation" slot-scope="text, record">
        <a @click="detail(record)" title="查看">查看</a>
      </template>
    </a-table>
    <ProcessQueryForm
      ref="ProcessQueryForm"
      @close="handleProcessQueryFormClose"
      :visible="ProcessQueryForm.visible">
    </ProcessQueryForm>
  </div>
</template>
<script>

import ProcessQueryForm from '../dynamicForm/ProcessQueryForm'
export default {
  name: 'InTransitProcess',
  components: {ProcessQueryForm},
  props: {
    username: {
      require: true
    }
  },
  data () {
    return {
      loading: false,
      dataSource: [],
      ProcessQueryForm: {
        visible: false
      },
      pagination: {
        pageSizeOptions: ['5', '10'],
        defaultCurrent: 1,
        defaultPageSize: 5,
        showQuickJumper: true,
        showSizeChanger: true,
        showTotal: (total, range) => `显示 ${range[0]} ~ ${range[1]} 条记录，共 ${total} 条记录`
      }
    }
  },
  computed: {
    columns () {
      return [
        {
          title: '任务单编号',
          dataIndex: 'procInstId'
        },
        {
          title: '流程名称',
          dataIndex: 'procDefName'
        }, {
          title: '更新时间',
          dataIndex: 'arrivalDate'
        }, {
          title: '当前环节',
          dataIndex: 'currNode.nodeName'
        },
        {
          title: '当前分配',
          dataIndex: 'currApplicant'
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' }
        }]
    }},
  mounted () {
    this.fetch()
  },
  methods: {
    onSearch () {
      this.fetch({
        ...this.queryParams
      })
    },
    handleProcessQueryFormClose () {
      this.ProcessQueryForm.visible = false
    },
    handleProcessQueryFormSuccess () {
      this.ProcessQueryForm.visible = false
    },
    // 查看任务单详情
    detail (record) {
      this.$get('form/' + record.customProcess.qryFormId).then((r) => {
        this.$refs.ProcessQueryForm.setFormValues(record.procInstId, record.customProcess.qryFormTitle, r.data.formJson)
        this.ProcessQueryForm.visible = true
      })
    },
    handleTableChange (pagination, filters, sorter) {
      // 将这三个参数赋值给Vue data，用于后续使用
      this.paginationInfo = pagination
      this.filteredInfo = filters
      this.sortedInfo = sorter
      this.fetch({
        sortField: sorter.field,
        sortOrder: sorter.order,
        ...filters
      })
    },
    fetch (params = {}) {
      // 显示loading
      this.loading = true
      if (this.paginationInfo) {
        // 如果分页信息不为空，则设置表格当前第几页，每页条数，并设置查询分页参数
        this.$refs.TableInfo.pagination.current = this.paginationInfo.current
        this.$refs.TableInfo.pagination.pageSize = this.paginationInfo.pageSize
        params.pageSize = this.paginationInfo.pageSize
        params.pageNum = this.paginationInfo.current
      } else {
        // 如果分页信息为空，则设置为默认值
        params.pageSize = this.pagination.defaultPageSize
        params.pageNum = this.pagination.defaultCurrent
      }
      // 数据加载完毕，关闭loading
      this.$get('process/inTransitProcess', {
        userId: this.username,
        ...params
      }).then((r) => {
        let data = r.data
        const pagination = { ...this.pagination }
        pagination.total = data.total
        this.dataSource = data.rows
        this.pagination = pagination
        // 数据加载完毕，关闭loading
        this.loading = false
      })
    }
  }
}

</script>
<style scoped>
</style>
